<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>WEditor</title>
    <link rel="stylesheet" href="/cdn.jsdelivr.net/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="/unpkg.com/element-ui/lib/theme-chalk/index.css">

    <link rel="stylesheet" type="text/css" href="/static/libs/css/buttons.css">
    <link rel="stylesheet" type="text/css" href="/static/libs/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css"
          href="/cdn.jsdelivr.net/bootstrap.select/1.12.2/css/bootstrap-select.min.css">
    <link rel="stylesheet" type="text/css" href="{{ static_url('style.css') }}">
    <!-- jstree -->
    <link rel="stylesheet" href="/cdn.jsdelivr.net/npm/jstree@3.3.8/dist/themes/default/style.min.css">
</head>

<body>
<div id="app">
    <nav class="navbar navbar-default" style="margin-bottom: 0px">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                ATX <strong>WEditor</strong>
                <small v-text="version"></small>
            </a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <!--         <ul class="nav navbar-nav">
              <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
            </ul> -->
            <form class="navbar-form navbar-left" onsubmit="return false">
                <div class="form-group">
                    <select v-model="platform" class="selectpicker" value="Android" title="Platform" data-width="fit">
                        <option data-icon="fa fa-android" value="Android">Android</option>
                        <option data-icon="fa fa-apple" value="iOS">iOS</option>
                        <!-- <option data-icon="glyphicon-apple" value="Neco">Neco(beta)</option> -->
                    </select>
                    <!-- <el-select v-model="serial" allow-create filterable placeholder="选择或输入">
                      <el-option
                        v-for="item in deviceList" :key="item.value" :label="item.label + ':' + item.value" :value="item.value">
                      </el-option>
                    </el-select> -->
                    <input type="text" v-model="serial" class="form-control" v-bind:placeholder="deviceUrl">
                </div>
                <button type="submit" class="btn btn-default" v-on:click="doConnect" :disabled="connecting">
                    Connect
                    <i v-if="connecting" class="fa fa-spinner fa-spin"></i>
                    <span v-if="deviceId" class="glyphicon glyphicon-grain color-green"></span>
                </button>
                <button :disabled="loading || connecting" class="btn btn-default"
                        v-on:click="dumpHierarchyWithScreen()">
                    <i class="fa fa-refresh" :class='{"fa-spin": dumping}'></i> Dump Hierarchy
                </button>
                <template v-if="platform == 'Android'">
                    <el-switch v-model="liveScreen" active-text="实时" inactive-text="静态">
                    </el-switch>
                </template>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <!-- <li><a href="#">Link</a></li> -->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">相关文档 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a target="_blank" href="https://github.com/openatx/weditor">openatx/weditor</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a target="_blank" href="https://github.com/openatx/weditor">uiautomator2快速参考</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a target="_blank" href="https://github.com/openatx/uiautomator2">openatx/uiautomator2</a>
                        </li>
                        <li><a target="_blank" href="https://github.com/openatx/facebook-wda">openatx/facebook-wda</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
    <div id="upper">
        <div id="left">
            <div>
            </div>
            <section id="screen">
                <canvas id="fgCanvas" @dblclick="doTap(nodeSelected)" class="canvas-fg"
                        v-bind:style="canvasStyle"></canvas>
                <canvas id="bgCanvas" class="canvas-bg" v-bind:style="canvasStyle"></canvas>
                <span class="finger finger-0" style="transform: translate3d(200px, 100px, 0px)"></span>
                <img style="z-index: 10" v-if="loading" src="/static/loading.svg">
            </section>
            <section id="footer">
                <button class="btn" @click="doKeyevent('power')">
                    <i class="fa fa-power-off color-red"></i> POWER
                </button>
                <button class="btn" @click="doKeyevent('home')">
                    <i class="fa fa-home"></i> Home
                </button>
                <button class="btn" @click="doKeyevent('back')" v-show="platform.toLowerCase() == 'android'">
                    <i class="fa fa-chevron-left"></i> Back
                </button>
                <button class="btn" disabled="true">Menu</button>
            </section>
            <!-- <div class="horizon-gap"></div> -->

        </div>
        <div id="vertical-gap1" class="handle vertical-gap"></div>

        <div class="middle">
            <div class="panel panel-default middle-panel">
                <div class="panel-heading">
                    <i class="fa fa-empire" aria-hidden="true"></i> Selected Element
                    <span class="pull-right">
              <button :disabled="loading" class="btn btn-default btn-xs" v-on:click="clearCanvas()">
                <i class="fa fa-square-o"></i> Clear Canvas
              </button>
            </span>
                </div>
                <div class="panel-body">
                    <div class="text-center">
                        <button class="btn btn-default btn-sm" :disabled="!nodeSelected" @click="doTapWidget()">Tap
                            Widget(Beta)
                        </button>
                        <button class="btn btn-default btn-sm" :disabled="!nodeSelected" v-on:click="doTap()">Tap
                        </button>
                        <button class="btn btn-default btn-sm" v-on:click="doSendKeys('')">Send Keys</button>
                        <!-- <button class="btn btn-default btn-sm" v-on:click="doClear()">Clear Text</button> -->
                    </div>
                </div>
                <table class="table table-bordered table-weditor table-condensed">
                    <thead>
                    <tr>
                        <th style="width: 8em">Prop</th>
                        <th>Value</th>
                    </tr>
                    </thead>
                    <tbody>
                    <template v-if="platform == 'Android'">
                        <tr>
                            <td class="always-exists-attr">activity</td>
                            <td contenteditable v-text="activity"></td>
                        </tr>
                    </template>

                    <template>
                        <tr>
                            <td class="always-exists-attr">XPathLite</td>
                            <td contenteditable v-text="elemXPathLite"></td>
                        </tr>
                        <!-- <tr>
                          <td>XPath(full)</td>
                          <td contenteditable v-text="elemXPathFull"></td>
                        </tr> -->
                        <tr>
                            <td>
                                <span @click="showCursorPercent = !showCursorPercent" class="cursor-pointer">
                                  坐标
                                  <i :class="{'inactive': !showCursorPercent}">%</i>
                                  <i :class="{'inactive': showCursorPercent}">px</i>
                                </span>
                            </td>
                            <td>
                    <span title="双击复制" @dblclick="copyToClipboard('('+cursorValue.x+', '+cursorValue.y+')')">
                      ({{!cursorValue.x}}, {{!cursorValue.y}})
                    </span>
                                <a href="#" @click="doPositionTap(cursorValue.x, cursorValue.y)">点击</a>
                            </td>
                        </tr>
                    </template>
                    <template>
                        <tr v-show="elem._type">
                            <td>className</td>
                            <td>
                                <i v-if="platform == 'iOS'">XCUIElementType</i><span v-text="elem._type"></span>
                                <small v-if="platform == 'iOS'" style="cursor: pointer; float: right;"
                                       @click="copyToClipboard('XCUIElementType' + elem._type)">复制
                                </small>
                            </td>
                        </tr>
                        <tr v-for="key in filterAttributeKeys(elem)" :key="key">
                            <td>{{!"* " + key}}</td>
                            <td>
                                <code v-text="elem[key]" class="prop-value"></code>
                            </td>
                        </tr>
                        <tr v-if="elem.rect">
                            <td># rect</td>
                            <td>{{!JSON.stringify(elem.rect)}}</td>
                        </tr>
                    </template>
                    </tbody>
                    <tfoot></tfoot>
                </table>
                <h5>
                    代码
                </h5>
                <!-- c9-ide -->
                <input type="text" v-model="generatedCode" class="form-control input-sm">
                <div class="checkbox">
                    <label>
                        <input v-model="autoCopy" type="checkbox"> 自动复制代码
                    </label>
                    <label>
                        <input v-model="useXPathOnly" type="checkbox"> 强制使用XPath
                    </label>
                </div>
            </div>
        </div>
        <div class="vertical-gap"></div>
        <div id="right">
            <div class="panel panel-default" style="margin-bottom: 0px; border-bottom: 0px">
                <div class="panel-heading">
                    <span class="glyphicon glyphicon-music"></span> Coding
                    <span class="pull-right coding-commands">
              <el-button @click="initPythonWebSocket" size="mini" style="color: red;" v-if="!pyshell.wsOpen">
                <i class="fa fa-unlink"></i> 点击重连
              </el-button>
              <el-tooltip :open-delay="500" content="Command+Shift+Enter" placement="top">
                <el-button type="primary" size="mini" plain @click="codeRunSelected" :loading="codeRunning">单行或选中运行
                </el-button>
              </el-tooltip>
              <el-tooltip :open-delay="500" content="Command+Enter" placement="top">
                <el-button type="primary" size="mini" plain icon="el-icon-caret-right"
                           @click="runPythonWithConnect(editor.getValue())" :loading="codeRunning">
                </el-button>
              </el-tooltip>
              <el-tooltip :open-delay="200" content="Stop debugging" placement="top">
                <el-button type="primary" size="mini" plain :disabled="!codeRunning" @click="stopDebugging">
                  <i class="fa fa-stop"></i>
                </el-button>
              </el-tooltip>
              <el-button icon="el-icon-delete" type="warning" size="mini" plain @click="clearCode">重置代码
              </el-button>
              <el-button icon="el-icon-document-copy" type="primary" size="mini" plain
                         @click="copyToClipboard(editor.getValue())">
              </el-button>
              <el-button type="danger" size="mini" plain @click="restartKernel">
                <i title="重启服务" class="fa fa-repeat"></i> <span v-if="pyshell.restarting"> ...</span>
              </el-button>
            </span>
                </div>
            </div>
            <pre class="editor-container">
          <div id="editor"></div>
        </pre>

            <!-- Colding Area -->
            <el-tabs type="border-card" v-model="tabActiveName">
                <el-tab-pane label="Hierarchy" name="hierarchy">
                    <div class="input-group input-group-sm">
                        <div class="input-group-btn">
                            <button class="btn btn-default">
                                <i class="glyphicon glyphicon-plus"></i>
                            </button>
                        </div>
                        <input id="jstree-search" type="text" class="form-control" placeholder="Search for...">
                        <span class="input-group-btn">
                <button class="btn btn-default" type="button">
                  <i class="glyphicon glyphicon-search"></i>
                </button>
              </span>
                    </div>
                    <div class="box">
                        <div id="jstree-hierarchy"></div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="Console" name="console">
                    <div id="console">
                        <img v-if="codeRunning" src="/static/running.svg">
                        <pre
                                ref="console"><span style="cursor: pointer" v-for="data in pyshell.consoleData"
                                                    @dblclick="gotoCursorLine(data.lineno)" v-text="data.value"></span></pre>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>

    <!-- alert and dialogs -->
    <div class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">
              <span class="color-red">
                <i class="fa fa-warning"></i> Error</span>
                    </h4>
                </div>
                <div class="modal-body">
                    <pre v-html="error"></pre>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script src="/cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="/cdn.jsdelivr.net/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/cdn.jsdelivr.net/bootstrap.select/1.12.2/js/bootstrap-select.min.js"></script>

<!-- ace editor -->
<script src="/cdn.jsdelivr.net/npm/ace-builds@1.4.12/src-noconflict/ace.min.js"></script>
<script src="/cdn.jsdelivr.net/npm/ace-builds@1.4.12/src-noconflict/mode-python.min.js"></script>
<script src="/cdn.jsdelivr.net/npm/ace-builds@1.4.12/src-noconflict/ext-language_tools.min.js"></script>
<script src="/cdn.jsdelivr.net/npm/ace-builds@1.4.12/src-noconflict/ext-searchbox.min.js"></script>
<script src="/cdn.jsdelivr.net/npm/ace-builds@1.4.12/src-noconflict/theme-monokai.js"></script>

<!-- <script src="http://10.240.187.174:8000/_d/js"></script> -->
<script src="/cdn.jsdelivr.net/npm/jstree@3.3.8/dist/jstree.min.js"></script>

<script src="{{ static_url('libs/vue-2.5.16/vue.js') }}"></script>
<script src="/unpkg.com/element-ui/lib/index.js"></script>

<script src="{{ static_url('js/common.js') }}"></script>
<script src="{{ static_url('js/index.js') }}"></script>

<!-- Baidu Analytics -->
<script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?eefa59dfd5fb29fcc57a8b2437ad5ab1";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>

</html>